
<template>
  <!-- 导航栏 -->
  <el-row style="margin: 15px 20px;">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>主数据</el-breadcrumb-item>
      <el-breadcrumb-item>物料分类管理</el-breadcrumb-item>
    </el-breadcrumb>
  </el-row>
  <!-- 搜索栏 -->
  <el-row style="margin: 15px 20px;">
    <el-form :inline="true" :model="searchObject" >
      <el-form-item label="名称">
        <el-input v-model="searchObject.分类名称" placeholder="物料名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
  </el-row>
  <!-- 工具栏 -->
  <el-row style="margin: 15px 20px;">
    <el-button-group>
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="primary" @click="edit">修改</el-button>
      <el-button type="primary" @click="del">删除</el-button>
      <el-button type="primary" @click="exportExcel">导出</el-button>
      <el-button type="primary" @click="importExcel">导入</el-button>
      <el-button type="primary" @click="refresh">刷新</el-button>
    </el-button-group>
  </el-row>
  <!-- 列表 -->
  <el-row style="margin: 15px 20px;">
    <el-table
      :data="categoryList"
      row-key="materialCategoryId"
      border
      stripe
      lazy
      :load="loadCategoryList"
      :tree-props="{children: 'children', hasChildren: 'isParentFlag'}"
    >
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column prop="materialCategoryId" label="#"/>
      <el-table-column prop="categoryName" label="名称"/>
      <el-table-column prop="sortOrder" label="排序"/>
      <el-table-column prop="materialType" label="物料/产品">
        <template #default="scope">
          <el-tag v-if="scope.row.materialType === 1">物料</el-tag>
          <el-tag v-else>产品</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="enabledFlag" label="是否启用">
        <template #default="scope">
          <el-tag v-if="scope.row.enabledFlag === 1">是</el-tag>
          <el-tag v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template #default="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.row)">新增</el-button>
          <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
  <!-- 弹窗 -->
  <!-- 新增物料的弹窗，其中有新增物料的表单 -->
  <el-dialog title="新增物料类别" v-model="addMeterialCategoryDialogVisible">
    <el-form :model="category">
      <el-form-item label="上级类别">
        <tag>无父类别</tag>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="category.categoryName" placeholder="请输入名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="category.sortOrder" placeholder="请输入排序" clearable></el-input>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-switch v-model="category.enabledFlag" active-text="是" active-value="1" inactive-value="0" inactive-text="否"></el-switch>
      </el-form-item>
      <el-form-item label="物料类别">
        <el-radio-group v-model="category.materialType">
          <el-radio label="1">物料</el-radio>
          <el-radio label="2">产品</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addMeterialCategory">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {ref,onMounted} from "vue";
import {getList,create} from '../../api/meterial-category.js';
// 搜索条件对象
const searchObject = ref({});
// 数据
const categoryList = ref([]);
const parentId = ref(0);
// 申明一个对象，用来缓存新怎物料类别的表单中的数据
const category = ref({});
// 新增弹窗标志
const addMeterialCategoryDialogVisible = ref(false);

// 新增物料的提交按钮事件
function addMeterialCategory() {
  // 发送请求
  create(category.value).then(res => {
    addMeterialCategoryDialogVisible.value = false;
    loadCategoryList();
  });
}
// 新增物料类别按钮事件
function add() {
  addMeterialCategoryDialogVisible.value = true;
  category.value = {};
}
// 加载数据
function loadCategoryList(row,treeNode, resolve) {
  if(row){
    parentId.value = row.materialCategoryId;
  }
  getList(parentId.value).then(res => {
    if(row){
      resolve(res.data)
    }else{
      categoryList.value = res.data;
    }
  });
}
// 加载数据
onMounted(async () => {
  loadCategoryList();
})
</script>
<style scoped>

</style>